<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css动画</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <style>
        .bounce-enter-active{
            animation: bounce-in 1s;
        }
        .bounce-leave-active{
            animation: bounce-in 1s reverse;
        }
        @keyframes bounce-in {
            0%{
                transform: scale(0);
            }
            50%{
                transform: scale(1.5);
            }
            100%{
                transform: scale(1);
            }
        }
    </style>
</head>
<body>
<div id="case12-demo3">
    <button v-on:click="showClick">点击出现动画隐藏/显示</button><br>
    <transition name="bounce" v-for="ImageSrc in arr">
        <img v-bind:src="ImageSrc" v-bind:style="StyleSrc" v-show="show">
    </transition>
</div>
<script type="text/javascript">
    var case12Demo3=new Vue({
        el:"#case12-demo3",
        data:{
            show:true,
            StyleSrc:{
                width:"500px",
                margin:"50px"
            },
            arr:[
                "../images/timg2.jpg",
                "../images/timg4.jpg",
                "../images/timg5.jpg"
            ]
        },
        methods:{
            showClick:function () {
                case12Demo3.show=!case12Demo3.show
            }
        }
    })
</script>
</body>
</html>
